@charset "UTF-8";

* {
  margin: 0px;
  padding: 0px;
}

#mainApp::-webkit-scrollbar {
  width: 2em;
}

#mainApp::-webkit-scrollbar-thumb {
    background-color: rgba(105, 112, 125, 0.5);
    border: 6px solid transparent;
    background-clip: content-box;
}

#container-parent::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

#container-parent::-webkit-scrollbar-corner, #container-parent::-webkit-scrollbar-track {
  background: transparent;
}

#container-parent::-webkit-scrollbar-thumb {
  background-color: rgba(105, 112, 125, 0.5);
  border: 6px solid transparent;
  background-clip: content-box;
}

.theme_DARK {
  --info-background: #2b2b2b;;
  --info-color: white;
  --svg-background: #010101;
  --tooltip-background: #3E4B5E;

  --node-border-color: #3D3D3D;
  --node-border-shadow: #17336952;
  --node-metadata-border-color: #3C3C3C;
  --node-metadata-color: #B5B6C0;
  --node-background: #212021;
  --edge-background: #6B6B6B;
  --text-color: #DFE5EF;
}

.theme_LIGHT {
  --info-background: #EBEFFA;
  --info-color: black;
  --svg-background: #FFFFFF;
  --tooltip-background: white;

  --node-border-color: #E4EAF2;
  --node-border-shadow: #17336926;
  --node-metadata-border-color: #CCD7E7;
  --node-metadata-color: #415681;
  --node-background: #FFF;
  --edge-background: #8992B3;
  --text-color: #173369;
}

body {
    background-color: var(--svg-background);
    overflow: hidden;
}


* div,
* span {
  font-family: 'Graphik', sans-serif !important;
}

.euiPagination__list {
  list-style: none;
  padding-inline-start: 0px;
}


.responseFail {
  color: #e06c75;
  padding: 12px !important;
  font-family: monospace !important;
}

.parsedRedisReply {
  white-space: pre-wrap;
  word-break: break-all;
  font: normal normal normal 14px/17px Inconsolata !important;
  padding: 4px 12px !important;
  color: var(--info-color);
}

.responseInfo {
  color: var(--info-color);
  padding: 12px !important;
  font-family: monospace !important;
}

.euiToolTip {
  color: var(--info-color) !important;
  background-color: var(--tooltip-background) !important;
  font-size: 12px !important;
}

.euiToolTip__arrow {
  background-color: var(--tooltip-background) !important;
}


.euiToolTipAnchor {
  display: unset !important;
}

.InfoData {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  // Make text selectable
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.FooterCommon {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: var(--node-metadata-color);
  font-size: 12px;


  // Make text selectable
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.ProfileContainer {
  width: 320px;
  min-height: 84px;

  padding-left: 18px !important;
  padding-right: 18px !important;

  box-shadow: 0px 3px 12px var(--node-border-shadow);
  border: 1px solid var(--node-border-color) !important;
  border-radius: 4px;
  opacity: 1;

  display: flex;
  flex-direction: column;
  justify-content: space-around;

  background-color: var(--node-background);
  color: var(--text-color);

  &:hover {
      outline: 2px solid #85A2FE !important;
      box-sizing: border-box;
  }

  .Main {

      display: flex;
      justify-content: space-between;
      line-height: 18px;

      font-size: 13px;
      color: var(--text-color);

      padding-top: 12px;
      padding-bottom: 12px;

      .Type {
          color: #CE915B;
          text-transform: lowercase;
      }
  }

  .Footer{
    padding-top: 4px;
    padding-bottom: 12px;
    height: auto;
  }

  .MetaData {
      display: flex;
      justify-content: space-between;
      line-height: 18px;
      color: var(--node-metadata-color);

      padding-top: 12px;
      padding-bottom: 12px;

      height: 42px;             //FIXME: fixed height?
      border-top: 0.5px solid var(--node-metadata-border-color);

      .Time {
          display: flex;
          align-items: center;
          font-size: 12px;

          div:first-child {
              padding-right: 5px;
          }

      }

      .Size {
          display: flex;
          align-items: center;
          font-size: 13px;

          div:first-child {
              padding-right: 5px;
          }


      }

      .IconContainer {
          > svg {
              width: 12px !important;
              height: 13px !important;
          }
      }
  }
}

.ExplainContainer {
  width: 240px;
  min-height: 42px;

  box-shadow: 0px 3px 12px var(--node-border-shadow);
  border: 1px solid var(--node-border-color) !important;
  border-radius: 4px;
  opacity: 1;

  padding: 12px 18px 12px 18px !important;

  display: flex;
  flex-direction: column;
  justify-content: space-around;

  background-color: var(--node-background);

  &:hover {
      outline: 2px solid #85A2FE !important;
      box-sizing: border-box;
  }

  .Main {
    // height: 42px;
    font-size: 13px;
    color: var(--text-color);

    .Info {
        display: flex;
        justify-content: space-between;
        .Type {
            color: #CE915B;
            text-transform: lowercase;
        }
    }

  }

  .Footer{
    height: 24px;
    padding-top: 6px;
  }
}


.ProfileInfo {
  display: flex;
  justify-content: center;
  color: var(--text-color);

  font-family: 'Graphik', sans-serif !important;
  font-size: 13px;

  padding-bottom: 3px !important;

  position: absolute;
  bottom: 12px;
  width: 100%;
}

.ProfileTimeInfo {
    background-color: var(--info-background);

    padding-top: 3px !important;

    .Item {

        padding-left: 18px;
        padding-right: 18px;

        .Key {
            font-size: 13px;
            line-height: 18px;
        }

        .Value {
            font-size: 18px;
            line-height: 24px;
        }
    }
}

.ProfileTimeMini {
  background-color: var(--svg-background);
}

.NodeType {
  color: #CE915B;
}

.NodeMetadata {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: darkgrey;
}

.NodeInfoDivider {
  width: 284px;
  height: 29px;
  border-bottom: 1px solid #3D3D3D !important;
  position: absolute;
  color: #B5B6C0;
}

.NodeTime {
  display: flex;
  align-items: center;
}


.NodeContentInfo {
  display: flex;
  align-items: center;
}


.NodeTimeIcon {
  padding-right: 5px !important;
}

.NodeContentIcon {
  padding-left: 5px !important;
}

.Box {
  width: 5px;
  height: 9px;
  background-color: #FF6280;

  align-self: center;

  margin-left: 2px !important;
}

.ZoomMenu {
    position: absolute;
    bottom: 110px;
    right: 10px;
    border-right: 4px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 16%), 0 1px 6px rgb(0 0 0 / 23%);
    display: flex;
    flex-direction: column;
}

.CollapseButton {
    color: var(--text-color);
    line-height: 18px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    cursor: pointer;

    div:first-child {
        padding-right: 5px;
    }
}
